<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script src="js/socket.io.js"></script>
<!--[if IE]>
	<script src="js/excanvas.compiled.js"></script>
	<script src="js/html5.js"></script>
<![endif]--> 
<script type="text/javascript">
	var context;
	var tableWH = 20;
	var playerW = 18;
	var playerH = 18;
	var playerX, playerY;
	var hashMap = {
		    Set : function(key,value){this[key] = value},
		    Get : function(key){return this[key]},
		    Contains : function(key){return this.Get(key) == null?false:true},
		    Remove : function(key){delete this[key]}
		}
	$(document).ready(function(){
		//绘制表格
		context = $("#myCanvas").get(0).getContext("2d");
		context.strokeRect(0, 0, 200, 200);
		for(var i = 1; i < 200/tableWH; i++){
			context.beginPath();
			context.moveTo(0 + tableWH * i, 0);
			context.lineTo(0 + tableWH * i, 200 + 0);
			context.closePath();
			context.stroke();
		}
		for(var i = 1; i < 200/tableWH; i++){
			context.beginPath();
			context.moveTo(0, 0 + tableWH * i);
			context.lineTo(200 + 0, 0 + tableWH * i);
			context.closePath();
			context.stroke();
		}
		
		//连接服务器
		var socket = io.connect('http://127.0.0.1:9000');
		socket.on('connect', function() {
			$('#message').append("服务器已经连接！</br>");
			$("#submit").attr("disabled", false);
		});
		socket.on('error', function(e) {
			$('#message').append("服务器连接失败！</br>");
		});
		//监视点击行为
		$("#myCanvas").click(function(event){
			socket.emit('move', event.pageX, event.pageY);
		});
		
		$("#submit").click(function(){
			socket.emit("name", $("#name").val(),  $('input:radio[name="color"]:checked').val());
		});
		
		//更新客户端
		socket.on("move", function(msg){
			hashMap.Get(msg["name"]).clearRect(msg["ox"], msg["oy"], playerW, playerH);
			hashMap.Get(msg["name"]).fillStyle = msg["color"];
			hashMap.Get(msg["name"]).fillRect(msg["x"], msg["y"], playerW, playerH);
		});
		
		//新玩家加入
		socket.on("new", function(msg){
			for(var a = 0; a < msg.length; a++){
				var name = msg[a]["name"];
				var x = msg[a]["x"];
				var y = msg[a]["y"];
				var color = msg[a]["color"];

				//绘制玩家
				var contextP = $("#myCanvas").get(0).getContext("2d");
				contextP.fillStyle = color;
				contextP.fillRect(x, y, playerW, playerH);
				hashMap.Set(name, contextP);
			}
		});
		
		//玩家离开
		socket.on("left", function(msg){
			hashMap.Get(msg["name"]).clearRect(msg["x"], msg["y"], playerW, playerH);
		});
		
	});
	
	//键盘事件
	$(document).keydown(function(event){
		if(event.keyCode === 38 || event.keyCode === 40 || event.keyCode === 37 || event.keyCode === 39)
			playerMove(contextP, playerW, playerH, event.keyCode);
	});
	
	//玩家移动
	function playerMove(con, w, h, keyCode){
		con.clearRect(playerX, playerY, w, h);
		var x, y;
		//上
		if(keyCode === 38){
			if(playerY - tableWH < 40){
				y = 200 - 19;
			}else{
				y = playerY - tableWH;
			}
			con.fillRect(playerX, y, w, h);
			playerY = y;
		//下
		}else if(keyCode === 40){
			if(playerY + tableWH > 200){
				y = 1;
			}else{
				y = playerY + tableWH;
			}
			con.fillRect(playerX, y, w, h);
			playerY = y;
		//左
		}else if(keyCode === 37){
			if(playerX - tableWH < 0){
				x = 200 - 19;
			}else{
				x = playerX - tableWH;
			}
			con.fillRect(x, playerY, w, h);
			playerX = x;
		//右
		}else if(keyCode === 39){
			if(playerX + tableWH > 200){
				x = 1;
			}else{
				x = playerX + tableWH;
			}
			con.fillRect(x, playerY, w, h);
			playerX = x;
		}
	}
</script>
</head>
<body>
	<canvas id="myCanvas" width="200" height="200">
		
	</canvas>
	<input id="name">
	<input type="radio" name="color" value="rgb(0, 0, 0)">黑
	<input type="radio" name="color" value="rgb(255, 0, 0)">红
	<input type="radio" name="color" value="rgb(0, 255, 0)">绿
	<input id="submit" type="button" value="提交" disabled="disabled">
	<div id="message"></div>
</body>
</html>